<template>
  <canvas id="canvas"></canvas>
  <div class="content">
    <div class="text-center title">旺链科技</div>
    <el-form :model="form" size="large">
      <el-form-item prop="username">
        <el-input
          ref="usernameRef"
          v-model.trig="form.username"
          :class="{ wanning: state.showUsernameWarning, shock: state.showUsernameWarning }"
          placeholder="请输入用户名"
          @focus="inputFocus('showUsernameWarning')"
          @blur="inputBlur('showUsernameWarning', form.username)"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          ref="passwordRef"
          v-model.trig="form.password"
          :class="{ wanning: state.showPWDWarning, shock: state.showPWDWarning }"
          placeholder="请输入登录密码"
          @focus="inputFocus('showPWDWarning')"
          @blur="inputBlur('showPWDWarning', form.password)"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="btn-box">
      <el-button class="w-100" plain size="large" @click="login">登录</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { LoginCanvas } from '@/hooks/common/hook-canvas'
import { LoginCanvasType } from '@/hooks/common/hook-types'
import { useStore } from 'vuex'

interface State {
  windowWidth: number
  windowHeight: number
  showUsernameWarning: boolean
  showPWDWarning: boolean
  hasValidate: boolean
}

interface Form {
  username: string
  password: string
  code?: string
}

const state: State = reactive({
  windowWidth: 0,
  windowHeight: 0,
  showUsernameWarning: false,
  showPWDWarning: false,
  hasValidate: false
})

const form: Form = reactive({
  username: '',
  password: '',
  code: ''
})

const store = useStore()
let dom: HTMLCanvasElement
let draw: LoginCanvasType
const usernameRef = ref()
const passwordRef = ref()

function getWindowSize(dom: HTMLCanvasElement) {
  state.windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
  state.windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
  dom.width = state.windowWidth
  dom.height = state.windowHeight
}

onMounted(() => {
  dom = document.getElementById('canvas') as HTMLCanvasElement
  getWindowSize(dom)
  draw = new LoginCanvas(dom)
  draw.startAnima()
})

const inputBlur = (name: 'showUsernameWarning' | 'showPWDWarning', value: string) => {
  if (!value) {
    state[name] = true
  }
}

const inputFocus = (name: 'showUsernameWarning' | 'showPWDWarning') => {
  state[name] = false
}

const login = () => {
  if (!form.username) {
    state.showUsernameWarning = true
  }
  if (!form.password) {
    state.showPWDWarning = true
  }
  if (form.username && form.password) {
    if (state.hasValidate === true) {
      // 二次认证
    } else {
      store.dispatch('login', form)
    }
  }
}

window.onresize = function () {
  draw.closeAnima()
  draw.clear()
  getWindowSize(dom)
  draw = new LoginCanvas(dom)
  draw.startAnima()
}
</script>

<style lang="less">
#canvas {
  position: relative;
  top: -10px;
  background: linear-gradient(to top, rgba(#103f60, 0.5), rgba(#103f60, 0.7), rgba(#103f60, 0.75), rgba(#103f60, 0.57), rgba(#103f60, 0.5));
  background-color: #000;
}

.content {
  position: absolute;
  height: 320px;
  width: 300px;
  left: 50%;
  top: 50%;
  transform: translate(-30%, -70%);
  padding: 10px 20px 30px 20px;
  border-radius: 10px;
  background-color: rgba(@bg-color-1, 0.2);
  box-shadow: 0 0 50px 0 rgba(@bg-color-1, 0.5) inset;

  .btn-box {
    margin-top: 50px;
  }

  .title {
    line-height: 3em;
    font-size: 24px;
    color: @color-white;
  }

  .wanning {
    .el-input__wrapper {
      background-color: @bg-color-warning;
    }
  }
}
</style>
